<template>
  <div class="homeindex">
    <div class="homeindex_top">
      <el-carousel :interval="5000" arrow="always">
        <el-carousel-item v-for="item in 4" :key="item">
          <img src="../../../../assets/images/u67.png" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- viode -->
    <div class="content">
      <div class="home_viode">
        <div class="input_video">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
      </div>
      <!-- <h1 class="animate__animated animate__bounceInLeft">An animated element</h1> -->
      <!--  -->
      <div class="postion">
        <div class="Industrial-layout">
          <p class="name">产业布局</p>
          <p class="eng">INDUSTRIAL LAYOUT</p>
          <div class="target">
            以“医疗”为保障，“养老”为依托， “文化”为核心，契合济南“千亿产业”计划
            打造济南历下区区域康养服务生态圈。
          </div>

          <div class="Industrial-layout content">
            <div class="animate__animated" ref="img">
              <div class="content_layout">
                <div class="content_layout img">
                  <img src="../../../../assets/images/u36.jpg" alt="" />
                </div>
                <div class="text">
                  <div style="line-height: 4rem">
                    <p class="title">槿椿颐养中心</p>
                    <p class="english">JIN CHUN Nursing center</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="animate__animated animate__bounceInRight">
              <div class="content_layouttwo">
                <div class="ccontent_layouttwo img ">
                  <img src="../../../../assets/images/u36.jpg" alt="" />
                </div>
                <div class="texttwo">
                  <div style="line-height: 4rem">
                    <p class="titletwo">槿椿颐养中心</p>
                    <p class="englishtwo">JIN CHUN Nursing center</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="postion">
        <div class="Industrial-layout">
          <p class="name">槿椿特色</p>
          <p class="eng">JIN’CHUN CHARACTETISTIC</p>
          <div class="target">
            以自理、餐饮、医疗、护理四大高端长者生活维度设定引领行业的专业颐养服务体系
            用您最熟悉的生活方式，塑造全新生活体验
          </div>
        </div>

        <div class="characteristic">
          <div class="backbrang">
            <div class="fold">
              <div>
                <div>
                  <img src="../../../../assets/icon/icon_c.png" alt="" />
                </div>
                <div>
                  <p>医养体系</p>
                  <p>Medical system</p>
                </div>
              </div>
              <div class="foldtow">
                <div class="foldtow_within">
                  <div>医养体系</div>
                  <div>
                    旅养体系，从养老产业的行业政策来看，国家通过《关于加快发展养老服务业的若干意见》来动员社会力量参与养老产业，鼓励养老业的产业化......
                  </div>
                  <div class="folftow_genduo">
                    <span>查看详情</span
                    ><img src="../../../../assets/icon/icon_Right.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="backbrang">
            <div class="fold">
              <div>
                <div>
                  <img src="../../../../assets/icon/icon_c.png" alt="" />
                </div>
                <div>
                  <p>智养体系</p>
                  <p>intelligence system</p>
                </div>
              </div>
              <div class="foldtow">
                <div class="foldtow_within">
                  <div>智养体系</div>
                  <div>
                    旅养体系，从养老产业的行业政策来看，国家通过《关于加快发展养老服务业的若干意见》来动员社会力量参与养老产业，鼓励养老业的产业化......
                  </div>
                  <div class="folftow_genduo">
                    <span>查看详情</span
                    ><img src="../../../../assets/icon/icon_Right.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="backbrang">
            <div class="fold">
              <div>
                <div>
                  <img src="../../../../assets/icon/icon_c.png" alt="" />
                </div>
                <div>
                  <p>康养体系</p>
                  <p>Health system</p>
                </div>
              </div>
              <div class="foldtow">
                <div class="foldtow_within">
                  <div>康养体系</div>
                  <div>
                    旅养体系，从养老产业的行业政策来看，国家通过《关于加快发展养老服务业的若干意见》来动员社会力量参与养老产业，鼓励养老业的产业化......
                  </div>
                  <div class="folftow_genduo">
                    <span>查看详情</span
                    ><img src="../../../../assets/icon/icon_Right.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="backbrang">
            <div class="fold">
              <div>
                <div>
                  <img src="../../../../assets/icon/icon_c.png" alt="" />
                </div>
                <div>
                  <p>教养体系</p>
                  <p>Education system</p>
                </div>
              </div>
              <div class="foldtow">
                <div class="foldtow_within">
                  <div>教养体系</div>
                  <div>
                    旅养体系，从养老产业的行业政策来看，国家通过《关于加快发展养老服务业的若干意见》来动员社会力量参与养老产业，鼓励养老业的产业化......
                  </div>
                  <div class="folftow_genduo">
                    <span>查看详情</span
                    ><img src="../../../../assets/icon/icon_Right.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="backbrang">
            <div class="fold">
              <div>
                <div>
                  <img src="../../../../assets/icon/icon_c.png" alt="" />
                </div>
                <div>
                  <p>旅养体系</p>
                  <p>Travel and maintenance system</p>
                </div>
              </div>
              <div class="foldtow">
                <div class="foldtow_within">
                  <div>旅养体系</div>
                  <div>
                    旅养体系，从养老产业的行业政策来看，国家通过《关于加快发展养老服务业的若干意见》来动员社会力量参与养老产业，鼓励养老业的产业化......
                  </div>
                  <div class="folftow_genduo">
                    <span>查看详情</span
                    ><img src="../../../../assets/icon/icon_Right.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="backbrang">
            <div class="fold">
              <div>
                <div>
                  <img src="../../../../assets/icon/icon_c.png" alt="" />
                </div>
                <div>
                  <p>乐养体系</p>
                  <p>Happy system</p>
                </div>
              </div>
              <div class="foldtow">
                <div class="foldtow_within">
                  <div>乐养体系</div>
                  <div>
                    旅养体系，从养老产业的行业政策来看，国家通过《关于加快发展养老服务业的若干意见》来动员社会力量参与养老产业，鼓励养老业的产业化......
                  </div>
                  <div class="folftow_genduo ">
                    <span>查看详情</span
                    ><img src="../../../../assets/icon/icon_Right.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="postion">
        <div class="Industrial-layout">
          <p class="name">槿椿资讯</p>
          <p class="eng">JIN’CHUN NEWS</p>
          <div class="target">美好生活，正在发生。身边无小事，分享乐自在</div>
        </div>

        <div class="layui_characteristic">
          <div class="topdiv">
            <div class="logo hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </div>
            <div class="topdivtext">
              <p>长者在我心中，服务在您</p>
              <p>
                成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。紧紧围绕明府城保护开发、中央商务区招......
              </p>
              <hr />
              <div class="more">
                <span>2022-03-09</span>
                <div>
                  <span>查看详情</span>
                </div>
              </div>
            </div>
          </div>

          <div class="topdiv">
            <div class="logo hidd">
              <img src="../../../../assets/images/u36.jpg" alt="" />
            </div>
            <div class="topdivtext">
              <p>老年协会、爱心企业践行</p>
              <p>
                俗话说"家有一老，如有一宝"，老年协会和街道、社区领导表示要主动适应社会老龄化的新形势，用心用情做好老年......
              </p>
              <hr />
              <div class="more">
                <span>2022-03-09</span>
                <div>
                  <span>查看详情</span>
                </div>
              </div>
            </div>
          </div>

          <div class="topdiv">
            <div class="logo hidd">
               <img src="../../../../assets/images/u36.jpg" alt="" />
            </div>
            <div class="topdivtext">
              <p>老年协会、爱心企业践行</p>
              <p>
                俗话说"家有一老，如有一宝"，老年协会和街道、社区领导表示要主动适应社会老龄化的新形势，用心用情做好老年......
              </p>
              <hr />
              <div class="more">
                <span>2022-03-09</span>
                <div>
                  <span>查看详情</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="postion" style="text-align: center">
        <a class="list_data">查看更多</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      boetf: "animate__animated animate__bounceInLeft",
      // 视频播放
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            // type: "",
            src: "https://dvod.300hu.com/vod/product/c52cd9aa-a7fc-40f8-b708-9cbe8b5e5cbd/c94ac2808e0549feb3c6fd33c2d468e5.mp4", //url地址
          },
        ],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      htmls:
        "<p>以“医疗”为保障，“养老”为依托， “文化”为核心，契合济南“千亿产业”计划打造济南历下区区域康养服务生态圈。</p>",
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$wow.init();
    });
    console.log(window.addEventListener("scroll", this.handleScroll));
  },
  methods: {
    handleScroll() {
      var scrollTop = window.pageYOffset;
      if (scrollTop >= 1280) {
        this.$refs.img.classList.add("animate__bounceInLeft");
      }
    },
  },
};
</script>
<style scoped>
.logo img {
  cursor: pointer;
  transition: all 0.6s;
}
:hover {
  cursor: pointer;
}
.homeindex_top img {
  width: 100%;
  height: 100%;
}
.home_viode {
  margin: 8rem auto;
  margin-bottom: 8rem;
}
.content {
  margin: 0px 36rem 0px 36rem;
  overflow: hidden;
}
.Industrial-layout {
  /* width: 90.2rem; */
  margin: 0 auto;
}
.name {
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  font-size: 4rem;
  text-align: center;
}
.eng {
  font-family: Arial-Regular, Arial;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 2.1rem;
  letter-spacing: 0.6rem;
  text-align: center;
  margin-top: 3rem;
}
.target {
  font-size: 2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  margin-top: 5.4rem;
  width: 75rem;
  line-height: 3.6rem;
  margin: 3.4rem auto;
}
.Industrial-layout .content {
  width: 100%;
}
.content_layout {
  display: flex;
  margin-bottom: 2rem;
}
.content_layout .img {
  width: 84rem;
  height: 41.6rem;
}
.content_layout .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content_layouttwo {
  display: flex;
  margin-bottom: 2rem;
}
.content_layouttwo .img {
  width: 36rem;
  height: 41.6rem;
}
.content_layouttwo .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.text {
  width: 36rem;
  /* width: 360px; */
  height: 41.6rem;
  background: #299399;
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.16);
  border-radius: 0px 0px 0px 0px;
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
}
.title {
  text-align: center;
  font-size: 3.2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
  /* line-height: 2.2rem; */
}
.titletwo {
  text-align: center;
  font-size: 3.2rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}
.text {
  font-size: 1.2rem;
  font-family: Arial-Regular, Arial;
  font-weight: 400;
  text-align: center;
  color: #ffffff;
  /* line-height: 2.2rem; */
  letter-spacing: 0.6rem;
}
.input_video {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.english {
  font-size: 1.4rem;
  font-family: Arial-Regular, Arial;
  font-weight: 400;
  color: #ffffff;
}
.englishtwo {
  font-size: 1.4rem;
  font-family: Arial-Regular, Arial;
  font-weight: 400;
  color: #ffffff;
}
.texttwo {
  width: 84rem;
  /* width: 360px; */
  height: 41.6rem;
  background: #299399;
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.16);
  border-radius: 0px 0px 0px 0px;
  opacity: 0.95;
  display: flex;
  align-items: center;
  justify-content: center;
}
.postion {
  margin-bottom: 8rem;
}
.characteristic {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.backbrang {
  width: 39rem;
  height: 36.8rem;
  background-image: url("../../../../assets/images/u36.jpg");
  /* background-color: red; */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.backbrang:hover .foldtow {
  display: hidden;
  opacity: 1;
  transform: translate(0, 0px);
  -webkit-transform: translate(0, 0px);
}
.fold {
  background: rgb(235 245 243 / 78%);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.6s;
  overflow: hidden;
}
.foldtow {
  position: absolute;
  z-index: 999;
  width: 100%;
  top: 0;
  background: #f78b0f;
  height: 100%;
  display: flex;
  align-items: center;
  /* display: none; */
  justify-content: center;
  transform: translate(0, 42rem);
  transition: all 0.4s;
  border: 1px solid;
  /* padding: 2rem 1.6rem 1.6rem 1.6rem; */
}
.foldtow div {
  margin: 2rem 1.6rem 1.6rem 1.6rem;
}
.foldtow_within {
  text-align: justify;
}
.foldtow_within div:nth-child(1) {
  font-size: 2.6rem;
  margin-bottom: 2.8rem !important;
  font-weight: 400;
  color: #ffffff;
}
.foldtow_within div:nth-child(2) {
  line-height: 4rem;
  font-size: 2.4rem;
  font-weight: 400;
  color: #ffffff;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 换行2段 */
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}
.folftow_genduo {
  display: flex;
  justify-content: end;
  align-items: center;
}
.folftow_genduo span {
  font-size: 1.4rem;
  font-weight: 400;
  color: #ffffff;
}
.folftow_genduo img {
  width: 0.7rem !important;
  height: 1.1rem !important;
  margin-left: 1.3rem;
}

.fold img {
  width: 12rem;
  height: 12rem;
}
.fold p:nth-child(1) {
  font-size: 3.2rem;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #299399;
  line-height: 3.6rem;
  margin-top: 2rem;
}
.fold p:nth-child(2) {
  font-size: 2rem;
  font-family: Arial-Regular, Arial;
  font-weight: 400;
  color: #299399;
  letter-spacing: 0.6rem;
}
.layui_characteristic {
  display: flex;
  justify-content: space-between;
  /* text-align: center; */
}
.topdiv {
  height: 68.1rem;
  width: 38rem;
  /* background: #299399; */
  border-radius: 0px  0px  4px  4px;
}
.topdiv .logo {
  width: 100%;
  height: 28rem;
}
.topdiv .logo img {
  width: 100%;
  height: 100%;
  object-fit: none;
}
.topdivtext {
  padding: 3.6rem 3.2rem 3.6rem 3.2rem;
  box-shadow: 0px 3px 8px 1px rgba(0, 0, 0, 0.1);
  height: 33.2rem;
  transition: all 0.6s;
}
.topdivtext p:nth-child(1) {
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: bold;
  color: #f78b0f;
  line-height: 4.2rem;
  font-size: 2.8rem;
  overflow: hidden;
}
.topdivtext p:nth-child(2) {
  font-size: 2.4rem;
  font-family: Microsoft JhengHei-Regular, Microsoft JhengHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
  line-height: 4rem;
  margin-top: 2.4rem;
}
hr {
  height: 1px;
  background: #f78b0f;
  margin-top: 2.4rem;
}
.more {
  display: flex;
  margin-top: 2.5rem;
  justify-content: space-between;
}
.list_data {
  text-align: center;
  font-size: 2.4rem;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #f78b0f;
  line-height: 2.3rem;
}

.topdivtext:hover {
  -webkit-box-shadow: 0px 6px 10px 6px rgb(0 0 0 / 13%);
  box-shadow: 0px 6px 10px 6px rgb(0 0 0 / 13%);
}
</style>
<style>
.homeindex_top .el-carousel__container {
  position: relative;
  height: 76.8rem !important;
}
</style>